<template>
  <v-container fluid fill-height>
    <v-row fill-height>
      <v-col cols="9">
        <v-card flat>
          <v-card-title v-text="'直播'" />
          <v-row>
            <v-card width="100%" class="mx-2" outlined>
              <v-card-title v-text="'屏幕共享/课件播放'" />
              <v-list-item>
                <video
                  width="90%"
                  height="90%"
                  id="live"
                  controls
                  autoplay
                  class="ma-4"
                />
              </v-list-item>
              <v-list-item>
                <v-text-field
                  class="mx-2"
                  hide-details
                  label="直播名"
                  outlined
                  v-model="name"
                />
              </v-list-item>
              <v-list-item>
                <v-btn color="primary" text @click="loadLive()">连接</v-btn>
              </v-list-item>
            </v-card>
          </v-row>
        </v-card>
      </v-col>
      <v-col cols="3">
        <v-row>
          <ChatWindow />
        </v-row>
        <v-row class="mt-4">
          <v-card width="100%" outlined>
            <v-list>
              <v-subheader>权限控制</v-subheader>
              <v-list-item v-for="stu in students" :key="stu.name">
                <v-list-item-content>
                  <v-list-item-title v-text="stu.name" />
                </v-list-item-content>
                <v-list-item-action>
                  <v-row>
                    <v-col>
                      <v-btn icon @click="stu.mute = !stu.mute">
                        <v-icon v-if="stu.mute">mdi-volume-mute</v-icon>
                        <v-icon v-else>mdi-volume-medium</v-icon>
                      </v-btn>
                    </v-col>
                    <v-col>
                      <v-btn icon @click="stu.edit = !stu.edit">
                        <v-icon v-if="stu.edit">mdi-pencil</v-icon>
                        <v-icon v-else>mdi-pencil-off</v-icon>
                      </v-btn>
                    </v-col>
                  </v-row>
                </v-list-item-action>
              </v-list-item>
            </v-list>
          </v-card>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
import ChatWindow from "../components/ChatWindow.vue";
import flvjs from "flv.js";

const baseUrl = "https://gkzhb.top:7210/live?port=1935&app=live&stream=";
export default {
  components: {
    ChatWindow
  },
  data: () => ({
    name: "",
    students: [
      {
        name: "小明",
        mute: false,
        edit: false
      },
      {
        name: "小红",
        mute: false,
        edit: false
      }
    ],
    flvPlayer: null
  }),
  created() {},
  methods: {
    loadLive() {
      const element = document.getElementById("live");
      if (null != this.flvPlayer) {
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
      this.flvPlayer = flvjs.createPlayer({
        enableWorker: false,
        type: "flv",
        isLive: true,
        url: baseUrl + this.name
      });
      this.flvPlayer.attachMediaElement(element);
      this.flvPlayer.load();
      this.flvPlayer.play();
    }
  }
};
</script>
